//config/common.js这个文件是生产环境和开发环境公用的webpack配置
//用于自动地把html文件和js文件组装起来
const {resolve}=require('./utils')
const HtmlWebpackPlugin = require('html-webpack-plugin')
//导入webpack的api包
const webpack=require('webpack')

module.exports={
    //入口：类比成榨汁机的入口
    //它表示应用程序启动时或打包时的入口文件在哪里
    //建议指定入口文件时，使用绝对路径，不太建议相对路径
    // entry:'./src/main.js'
    //__dirname当前文件所处文件夹的根目录
    // entry:resolve('src/main.js'),
    //对象方法也可以就变成多页面
    entry: {
        app: resolve('src/main.js'),
        // subApp: resolve('src/main.js'),
    },
    //出口：类比榨汁机的出口
    //它用于指定文件的输出路径和方式
    //在做出口配置时只能使用绝对路径,相对路径会报错.
    output: {
        //用于指定打包结果输出路径和方式
        path: resolve('dist'),
        //输出时指定文件的名字，bundle表示"一束、一捆"
        // filename:'bundle.js',
        //[name]是代表entry对象中的key
        //[hash]表示模块打包时自动生成的hash值
        //[chunkhash]是一种更加具体的hash生成算法,在打包处理时，如果当前模块及其依赖中没有发生代码变化，那么hash值不会变.
        //解决浏览器缓存机制所导致静态资源代码不更新得问题.
        filename: '[name]-[chunkhash].js',
        //每次打包时webpack自动删除dist目录,在重新生成新的dist目录.
        //这个写法是webpack v5的写法
        //在v4中,使用的是clean-webpack-plugin这个插件来实现的
        clean: true
    },
    //webpack插件用于修饰、扩展、弥补webpack功能
    plugins: [
        //这个插件的主要作用是把js文件和index.html组装起来
        //如果你不指定哪个index.html，这个插件会自动给你一个默认的index.html模板
        new HtmlWebpackPlugin({
            //手动指定使用哪个index,html模板,避免莫名其妙给我一个默认模板
            template: resolve('public/index.html'),
            filename: 'index.html',
            title: '2103'
        }),
        //这个插件是webpack的内置插件，用于显示webpack运行或打包的进度条
        new webpack.ProgressPlugin()
    ],
    //Loaders用于处理各类不同后缀的文件模块，比如.png，.sass,.jsx
    //在webpack眼中一切皆为模块，一切皆module
    //理解了Loaders这个重要概念，你就理解了webpack的核心
    module:{
        //rules是一个数组，用于定义处理不同模块的规则。
        rules:[
            //人话：当webpack运行或打包，如果监测到文件模块以.png结尾，就使用url-loader来处理这个模块.
            //注意：这个url-loader的使用方法是webpack v4的使用方法，在v5中已经不在这样使用了，但还是能用,有更简单的
            // {test:/.(png|jpg|gif|svg|jpeg)$/,use:['url-loader']},
            //v5的写法
            {test:/\.(png|jpg|gif|svg|jpeg)$/,type:'asset/resource'},
            //人话：当webpack运行或打包，如果检测到文件模块后缀以.css结尾，先使用css-loader加载.css文件，再交给style-loader将样式注入到DOM中,如果检测到模块以.scss结尾，先使用sass-loader加载sass文件，交给sass编译器编译，得到css，再由css-loader来加载上一步中编译成功的css文件，再次给style-loader将样式注入到DOM中
            //sass这个包要安装，它的作用是用于把sass文件编译成存粹的css.
            //外国人习惯把先做的放后面
            {test:/.(css|scss|sass)$/,use:['style-loader','css-loader','sass-loader']},
            //虽然在webpack中，对js文件导入导出不会报错，但为了考虑游览器的兼容性，该怎么处理？
            //人话：当webpack运行或打包，如果监测到文件模块是.js后缀时，使用babel-loader进行加载，然后交给Babel编译进行编译，变得结果是把ES2015+转换成游览器能够识别的ES5代码
            //exclude,一般第三方的包都是babel过，所以没有必要再次babel
            {test:/.(js|jsx)$/,use:['babel-loader'],exclude:/node_modules/},
            //解决txt自定义的
            {test:/.txt$/,use:['./config/loaders/txt-loader']},
            //支持typescript编程
            //当遇到.ts/.tsx后缀的文件时，使用ts-loader进行加载
            //交给typescript和@babel/preset-typescript进行编译
            {test: /.(ts|tsx)$/,use: ['ts-loader'],exclude: /node_modules/}]
    },
    //用于环境解析
    resolve:{
        alias:{
            //指定@等于src根路径
            '@':resolve('src'),
        },
        //用于忽略指定的文件后缀名(一般省略js模块)
        extensions:['.js','.jsx','.ts','.tsx','.vue','.json']
    }
}